/*
  学习目标：使用Prop.children属性- 模拟插槽
 
*/
import React, { Component } from 'react';

export default class App extends Component {
    render() {
        return (
            <div>
                <Hello></Hello>
                <Hello>我是传来的children</Hello>
                <HelloHasName>{{ title: '静夜思', content: <p>鹅鹅鹅</p> }}</HelloHasName>
                <HelloHasName>{{ title: '蜀道难', content: <p>难于上青天</p> }}</HelloHasName>
                <HelloScoped>
                    {(list) => (
                        <b>
                            {list.map((item) => (
                                <i key={item.id}>
                                    {item.name} --{item.content}
                                </i>
                            ))}
                        </b>
                    )}
                </HelloScoped>
            </div>
        );
    }
}

class HelloScoped extends React.Component {
    state = {
        list: [
            { id: 1, name: 'zs', content: '狂徒' },
            { id: 2, name: 'ls', content: '狂徒2' },
            { id: 3, name: '被告', content: '狂徒3' },
        ],
    };
    // 3. children 模拟 作用域插槽
    // 🔔 借助children是函数，传递state出去，渲染结构交给父组件
    render() {
        return <div>{this.props.children(this.state.list)}</div>;
    }
}

class HelloHasName extends React.Component {
    defaultInfo = '默认消息';
    render() {
        // 2. children 具名插槽
        // 借助children传对象，对象不同的属性名，可以放上不同的内容，来区分显示
        return (
            <div>
                <h1>{this.props.children.title}</h1>
                <hr />
                <div>{this.props.children.content}</div>
            </div>
        );
    }
}

class Hello extends React.Component {
    defaultInfo = '默认消息';
    render() {
        // 1. children 模拟普通插槽-支持默认值
        // 🔔 判断children是否为空，不传则为空
        return <h1>{this.props.children ? this.props.children : this.defaultInfo}</h1>;
    }
}